<template>
  <div class="newDemand-container-padding">
    <div class="buttonList">
      <el-button type="danger" @click="deletes">删除需求</el-button>
    </div>
    <div class="content">
      <div class="left">
        <div class="select">
          <div class="label">课题名称：</div>
          <el-select
            v-model="projectTopicId"
            placeholder="请选择"
            style="width: 80%"
            :disabled="id"
            @change="selectProject"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.topicId"
              :label="item.topicName"
              :value="item.topicId"
            />
          </el-select>
        </div>
        <div class="projectInfo">
          <div class="titles">课题信息</div>
          <div v-for="(item, index) in projectInfo" :key="index" class="pcount">
            <div class="label">{{ item.label }}</div>
            <div class="value">{{ projectData[item.key] }}</div>
          </div>
        </div>
        <div class="projectInfo">
          <div class="titles">项目信息</div>
          <div v-for="(item, index) in itemInfo" :key="index" class="pcount">
            <div class="label">{{ item.label }}</div>
            <div class="value">{{ itemData[item.key] }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-form
          :model="form"
          label-width="auto"
          style="max-width: 100%"
          :rules="rules"
        >
          <el-form-item label="单位名称：">
            <el-select
              v-model="form.unitName"
              placeholder="请选择"
              style="width: 400px"
              :disabled="id"
            >
              <el-option
                v-for="item in dptList"
                :key="item.id"
                :label="item.name"
                :value="item.id + '-' + item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目描述：">
            <el-input
              v-model="form.projectDescription"
              :rows="6"
              type="textarea"
              :disabled="id"
            />
          </el-form-item>
          <el-form-item label="研究周期：">
            <el-input
              v-model="form.researchCycle"
              style="width: 400px"
              :disabled="id"
            />
          </el-form-item>
          <el-form-item label="专业需求：">
            <el-input
              v-model="form.majorRequirement"
              :rows="6"
              type="textarea"
              :disabled="id"
            />
          </el-form-item>
          <el-form-item label="需求人数：" prop="number">
            <el-input
              v-model.number="form.demandNumber"
              style="width: 400px"
              :disabled="id"
            >
              <template #suffix>人</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import type { FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute } from 'vue-router'
  import { selectTopicList, queryTopicAndProject } from '@/api/project/index'
  import { useTimeFormat } from '@/utils/useTimeFormat'
  import { getSimpleDeptList } from '@/api/system/dept'
  import { isNumber } from '@/utils/validate'
  import { deletePatent , getDemandInfo } from '@/api/postdoctor'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import {ProjectData ,ItemData } from '../table/column'

  const route = useRoute()
  const { updateTime } = useTimeFormat()
  const id = ref()
  onMounted(() => {
    id.value = route.query.id
    getTopic()
    getDptList()
    getInfo()
  })
  const projectOptions = ref([])
  const dptList = ref([])
  const { closeTabNavigate } = useCloseTabNavigate()

  const validateNumber = (rule, value, callback) => {
    if (value && !isNumber(value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  }

  const getInfo =()=>{
    getDemandInfo({id:id.value ,getType:2}).then((res:any)=>{
      if(res.code == 0){
        projectTopicId.value = res.data.projectTopicId 
        selectProject(projectTopicId.value)
        form.value = res.data
      }
    })
  }

  const projectInfo = ref([
    {
      label: '课题名称：',
      key: 'name',
    },
    {
      label: '课题类型：',
      key: 'type',
    },
    {
      label: '课题负责人：',
      key: 'leader',
    },
    {
      label: '专业领域：',
      key: 'subjectAreaText',
    },
    {
      label: '研究周期：',
      key: 'researchDate',
    },
    {
      label: '预计投入经费：',
      key: 'estimatedBudget',
    },
    {
      label: '是否需要外协：',
      key: 'externalCooperationRequired',
    },
    {
      label: '承担单位：',
      key: 'leadingUnitName',
    },
    {
      label: '协作单位：',
      key: 'collaboratingUnitNames',
    },
  ])
  const projectData = ref<ProjectData>({})
  const itemInfo = ref([
    {
      label: '项目编号：',
      key: 'projectCode',
    },
    {
      label: '项目名称：',
      key: 'projectName',
    },
    {
      label: '项目等级：',
      key: 'projectLevel',
    },
    {
      label: '项目类型：',
      key: 'projectType',
    },
    {
      label: '是否重点项目：',
      key: 'keyProjectName',
    },
    {
      label: '项目负责人：',
      key: 'headerName',
    },
  ])

  const itemData = ref<ItemData>({})

  const form = ref({
    unitName: '',
    projectDescription: '',
    researchCycle: null,
    demandNumber: '',
    majorRequirement:''
  })

  // 关联的完结课题的id
  const projectTopicId = ref()

  const rules = reactive<FormRules>({
    demandNumber: [{ validator: validateNumber, trigger: 'blur' }],
  })

  const deletes = () => {
    ElMessageBox.confirm('确定删除该条博士后需求?', '删除博士后需求', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deletePatent(id.value).then((res:any) => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          closeTabNavigate({ name: 'Demand' })
      })
    })
  }

  const selectProject = (value) => {
    queryTopicAndProject({ topicId: value }).then((res: any) => {
      if (res.code == 0 || res.code == 200) {
        projectData.value = res.data.topicRespVO
        projectData.value.researchDate = `${updateTime(
          res.data.topicRespVO?.researchStartDate,
          'YYYY-MM-DD'
        )} ~ ${updateTime(res.data.topicRespVO?.researchEndDate, 'YYYY-MM-DD')}`
        itemData.value = res.data.projectInfoRespVO
        itemData.value.keyProjectName =
          res.data.projectInfoRespVO?.keyProject == 1 ? '是' : '否'
      }
    })
  }

  const getTopic = () => {
    selectTopicList({ type: 1 }).then((res: any) => {
      if (res.code == 0 || res.code == 200) {
        const list = res.data
        projectOptions.value = projectOptions.value.concat(list)
      }
    })
  }

  const getDptList = () => {
  getSimpleDeptList().then((res: any) => {
    dptList.value = res.data
  })
}
</script>

<style scoped lang="scss">
  .newDemand-container-padding {
    .buttonList {
      display: flex;
      justify-content: end;
      margin-bottom: 20px;
    }

    .content {
      display: flex;
      height: calc(100% - 31px);
      /* padding 20 + 1border */
      border-top: 1px solid #edeff2;
    }

    .select {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label {
        font-weight: 400;
        font-size: 14px;
        color: #606266;
        text-align: right;
        line-height: 22px;
      }
    }

    .left {
      width: 423px;
      height: 100%;
      border-right: 1px solid #edeff2;
      padding: 20px 20px 20px 0;

      .titles {
        width: 100%;
        height: 28px;
        padding-left: 10px;
        background: #f7f8f9;
        font-weight: 400;
        font-size: 14px;
        color: #606266;
        line-height: 28px;
        margin: 20px 0;
      }

      .pcount {
        display: flex;
        margin-bottom: 10px;

        .label {
          width: 84px;
          font-weight: 400;
          font-size: 12px;
          color: #00000040;
          text-align: right;
        }

        .value {
          width: 192px;
          font-weight: 400;
          font-size: 12px;
          color: #606266;
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 隐藏超出部分 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }
      }
    }

    .right {
      width: calc(100% - 423px);
      padding: 20px 40px;
      // .select {
      //   display: flex;
      //   justify-content: flex-start;
      //   .label {
      //     margin-right: 5px;
      //   }
      // }
    }
  }
</style>
